<template>
  <rect :x="x" :y="y" :width="width" :height="height" fill="none" stroke="#013ADF" stroke-width="3" :stroke-dasharray="6" ref="selectRect"/>
</template>

<script>
import Draggable from 'gsap/Draggable'

export default {
  props: {
    cursor: {
      default: 'default'
    }
  },
  data () {
    return {
      startPoint: { x: 0, y: 0 }, // 起点
      finishPoint: { x: 0, y: 0 }, // 终点
      isStart: false, // 是否开始框选
      isFinished: false, // 是否可结束框选
      left: 0, // 框的左边界
      right: 0, // 框的右边界
      top: 0, // 框的上边界
      bottom: 0, // 框的下边界
      isActived: false // 是否活动中，即鼠标是否按下
    }
  },
  methods: {
    /**
     * 设置起点
     * @param  {Number} options.x x坐标
     * @param  {Number} options.y y坐标
     * @author Jiangzhiwei
     * @time   2021-11-03T00:27:15+0800
     */
    setStartPoint ({ x, y } = { x: 0, y: 0 }) {
      this.isStart = true
      this.startPoint = { x, y }
      this.finishPoint = { x, y } // 使得起点终点相同，则不会显示出矩形
    },
    /**
     * 设置终点
     * @param  {Number} options.x x坐标
     * @param  {Number} options.y y坐标
     * @author Jiangzhiwei
     * @time   2021-11-03T00:28:41+0800
     */
    setFinishPoint ({ x, y }) {
      this.isFinished = true
      this.finishPoint = { x, y }
    },
    /**
     * 标记框选结束
     * @author Jiangzhiwei
     * @time   2021-11-03T00:22:32+0800
     */
    setOver () {
      this.setStartPoint()
      this.isStart = false
      this.isFinished = false
    },
    /**
     * 刷新边界
     * @author Jiangzhiwei
     * @time   2021-11-01T23:24:25+0800
     */
    refreshBounding () {
      if (this.startPoint.x < this.finishPoint.x) { // 起点x更小
        this.left = this.startPoint.x
        this.right = this.finishPoint.x
      } else { // 终点x更小
        this.left = this.finishPoint.x
        this.right = this.startPoint.x
      }
      if (this.startPoint.y < this.finishPoint.y) { // 起点y更小
        this.top = this.startPoint.y
        this.bottom = this.finishPoint.y
      } else { // 终点y更小
        this.top = this.finishPoint.y
        this.bottom = this.startPoint.y
      }
    },
    init () {
      this.node = Draggable.create(this.$refs.selectRect, {
        cursor: this.cursor,
        activeCursor: this.cursor
      })[0]
    },
    /**
     * 获取选中的组件
     * @return {Array} 组件
     * @author Jiangzhiwei
     * @time   2021-11-03T00:29:24+0800
     */
    getSelected () {
      const selectedComps = []
      const all = [...this.$parent.getNodeComps(), ...this.$parent.getLineComps()]
      all.forEach(item => {
        if (this.node.hitTest(item.$el)) {
          selectedComps.push(item)
        }
      })
      return selectedComps
    }
  },
  computed: {
    x () {
      return this.left
    },
    y () {
      return this.top
    },
    width () {
      return this.right - this.left
    },
    height () {
      return this.bottom - this.top
    }
  },
  watch: {
    startPoint () {
      this.refreshBounding()
    },
    finishPoint () {
      this.refreshBounding()
    }
  },
  mounted () {
    this.init()
  }
}
</script>
